<template>
  <div class="workbench-container">
    <div class="top-wrap">
      <div class="left-wrap">
        <div>
          <img style="width:150px; height:34px;" src="@/assets/MOVE.png" alt="">
        </div>
        <div style="margin-left:20px">
          <div class="title-msg">生产信息看板</div>
          <div class="title-con">PRODUCTION INFORMATION BOARD</div>
        </div>
      </div>
      <div class="right-wrap" v-if="orderInfo">
        <div class="it-bg"><span class="tm1">产线名称</span> <span class="tm2">{{orderInfo.LineCode}}</span></div>
        <div class="it-bg"> <span class="tm1">产品号</span> <span class="tm2">{{orderInfo.MaterialCode}}</span></div>
        <div class="it-bg"> <span class="tm1">计划数量</span> <span class="tm2">{{orderInfo.QTY}}</span></div>
        <div class="it-bg1" style="width:163px;"><span class="tm3">{{orderInfo.ShiftCode}}/{{orderInfo.PlanNo}}</span>
        </div>
        <div class="it-bg1" style="margin-right:0px;"><span class="tm3">开始{{orderInfo.StartTime}}</span></div>
        <div>-</div>
        <div class="it-bg1"><span class="tm3">结束{{orderInfo.EndTime}}</span> </div>
        <div class="it-bg3">
          <div style="width:100px;">
            <div class="nowTime">{{nowTime}}</div>
            <div class="nowDate">{{nowDate}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <Order></Order> -->
    <div v-if="WorkCenterCode" class="content-wrap">
      <div class="content-left">
        <MaterialsInformation v-if="materialInfo" :materialInfo="materialInfo" class="echa1 common-margin">
        </MaterialsInformation>
        <EquipmentStatus v-if="equipmentInfo" :equipmentInfo="equipmentInfo" class="echa2 common-margin">
        </EquipmentStatus>
      </div>
      <div class="content-center">
        <div class="cneter-w common-margin">
          <div class="all-toptitle-wrap">
            <div style="width:800px">
              <div class="chat-title">总生产量图表</div>
              <div class="chat-subtitle1">Total production chart</div>
            </div>
            <div class="event-item-w">
              <div @click="didselctItem('日产量')" :class="selectItem == '日产量' ? 'item-select':'item-default' ">日产量</div>
              <div @click="didselctItem('周产量')" :class="selectItem == '周产量' ? 'item-select':'item-default' ">周产量</div>
              <div @click="didselctItem('月产量')" :class="selectItem == '月产量' ? 'item-select':'item-default' ">月产量</div>
            </div>
          </div>
          <ProductionEchart v-if="produceInfo" :produceInfo="produceInfo" :selectItem="selectItem" class="echa3 ">
          </ProductionEchart>
          <ProcessEchart v-if="workCellInfo" :workCellInfo="workCellInfo" class="echa4 "></ProcessEchart>
        </div>
      </div>
      <div class="content-right">
        <ProductionFigures v-if="orderInfo" :orderInfo="orderInfo" class="echa5 common-margin"></ProductionFigures>
        <ProductionSchedule v-if="orderInfo" :orderInfo="orderInfo" class="echa6 common-margin"></ProductionSchedule>
      </div>
    </div>

    <el-dialog :destroy-on-close="true" :close-on-click-modal="false" title="请选择" :visible.sync="centerDialogVisible"
      width="30%" center :show-close="false">
      <el-select style="width:80%; margin-left:10%" v-model="WorkCenterCode1" placeholder="请选择">
        <el-option v-for="item in list" :key="item.WorkCenterCode" :label="item.WorkCenterName"
          :value="item.WorkCenterCode">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showSelectEvent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import MaterialsInformation from "./components-echart/MaterialsInformation.vue"
  import EquipmentStatus from "./components-echart/EquipmentStatus.vue"
  import ProcessEchart from "./components-echart/ProcessEchart.vue"
  import ProductionEchart from "./components-echart/ProductionEchart.vue"
  import ProductionFigures from "./components-echart/ProductionFigures.vue"
  import ProductionSchedule from "./components-echart/ProductionSchedule.vue"
  import Order from "./components/Order"
  import {
    api_screen_getWorkCenterList,
    api_screen_loadOrder,
    api_screen_loadMaterial,
    api_screen_loadMachine,
    api_screen_getProduceInfo,
    api_screen_getWorkCellInfo
  } from '@/api/index';
  export default {
    name: 'Workbench',
    components: {
      MaterialsInformation,
      EquipmentStatus,
      ProcessEchart,
      ProductionEchart,
      ProductionFigures,
      ProductionSchedule,
      Order
    },
    data() {
      return {
        centerDialogVisible: false,
        nowDate: "",
        nowTime: "",
        dataTimer: "",
        selectItem: "日产量",
        list: [],
        WorkCenterCode: "",
        WorkCenterCode1: "",
        orderInfo: "",
        materialInfo: "",
        equipmentInfo: "",
        produceInfo: "",
        workCellInfo: ""
      }
    },
    created() {
      this.getWorkCenterList();
    },
    mounted() {
      var _this = this;
      this.timer = setInterval(() => {
        _this.setNowTimes();
      }, 1000);

      this.dataTimer = setInterval(() => {
        _this.getScreenLoadOrder()
      }, 30000);
    },
    methods: {
      showSelectEvent() {
        this.WorkCenterCode = this.WorkCenterCode1;
        console.log(this.WorkCenterCode)
        if (this.WorkCenterCode1 == "") {
          this.$message.warning("请选择")
          return
        }
        this.centerDialogVisible = false;
        this.getScreenLoadOrder()

      },
      getWorkCenterList() {
        api_screen_getWorkCenterList().then(res => {
          this.list = res;
          this.centerDialogVisible = true;
        })
      },
      getScreenLoadOrder() {
        if (this.WorkCenterCode) {
          var params = {
            WorkCenter: this.WorkCenterCode
          }
          api_screen_loadOrder(params).then(res => {
            this.orderInfo = res;
            this.getScreenLoadMaterial();
            this.getScreenLoadMachine();
            this.didselctItem(this.selectItem)
          })
        }
      },

      getScreenLoadMaterial() {
        var params = {
          WorkCenter: this.WorkCenterCode,
          PlanNo: this.orderInfo.PlanNo,
        }
        api_screen_loadMaterial(params).then(res => {
          this.materialInfo = res;
        })
      },

      // equipmentInfo
      getScreenLoadMachine() {
        var params = {
          WorkCenter: this.WorkCenterCode,
          PlanNo: this.orderInfo.PlanNo,
        }
        api_screen_loadMachine(params).then(res => {
          this.equipmentInfo = res;
        })
      },
      // 产量
      getScreenGetProduceInfo(val) {
        var params = {
          WorkCenter: this.WorkCenterCode,
          PlanNo: this.orderInfo.PlanNo,
          StaticType: val ? val : "1"
        }
        api_screen_getProduceInfo(params).then(res => {
          this.produceInfo = res;
        })
      },
      // 工序
      getScreenGetWorkCellInfo(val) {
        var params = {
          WorkCenter: this.WorkCenterCode,
          PlanNo: this.orderInfo.PlanNo,
          StaticType: val ? val : "1"
        }
        api_screen_getWorkCellInfo(params).then(res => {
          this.workCellInfo = res;
        })
      },
      didselctItem(val) {
        this.selectItem = val;
        var dy = "1"
        if (val == "日产量") {
          dy = "1"
        } else if (val == "周产量") {
          dy = "2"
        } else if (val == "月产量") {
          dy = "3"
        }
        this.getScreenGetProduceInfo(dy);
        this.getScreenGetWorkCellInfo(dy);
      },
      setNowTimes() {
        let myDate = new Date();
        // console.log(myDate)
        let wk = myDate.getDay();
        let yy = String(myDate.getFullYear());
        let mm = myDate.getMonth() + 1;
        let dd = String(
          myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate());
        let hou = String(myDate.getHours() < 10 ? "0" +
          myDate.getHours() : myDate.getHours());
        let min = String(myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() :
          myDate.getMinutes());
        let sec = String(myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds());
        let weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ];
        let week = weeks[wk];
        this.nowDate = yy +
          "-" + mm + "-" + dd + ""
        this.nowTime = hou + ":" + min + ":" + sec;
        this.nowWeek = week;
      },
    },
    beforeDestroy() {
      clearInterval(this.timer);
      clearInterval(this.dataTimer);
    },
  }

</script>

<style lang="scss" scoped>
  .workbench-container {
    min-width: 1920px;
    min-height: 1080px;
    width: 100%;
    height: 100%;
    background: black;
    padding-top: 10px;

    .top-wrap {
      display: flex;
      justify-content: space-between;
      margin: 0px 10px 0 10px;
      min-width: 1900px;
      height: 62px;
      background: linear-gradient(0deg, #111825, #151E29);

      .left-wrap {
        margin-left: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        .title-msg {
          font-size: 32px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #FFFFFF;
        }

        .title-con {
          font-size: 12px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #FFFFFF;
        }
      }

      .right-wrap {
        display: flex;
        justify-content: center;
        align-items: center;

        .it-bg {
          padding: 12px 10px;
          text-align: center;
          min-width: 163px;
          height: 41px;
          background-image: url("../../assets/menu-wrap-bg.png");
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 20px;
        }

        .it-bg1 {
          padding: 15px 10px;
          text-align: center;
          min-width: 163px;
          height: 41px;

          background-image: url("../../assets/menu-wrap-bg.png");
          background-size: 100%;
          background-repeat: no-repeat;
          margin-right: 20px;

        }

        .it-bg3 {
          padding: 12px 10px;
          text-align: center;
          width: 113px;
          // height: 41px;
          margin-right: 20px;
        }

        .tm3 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
        }

        .tm1 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
        }

        .tm2 {
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: 800;
          color: #FFFFFF;
        }

        .nowTime {
          font-size: 22px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #CEEAFF;
          text-align: center;
        }

        .nowDate {
          margin-top: 5px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #CEEAFF;
          text-align: center;
        }
      }
    }

    .content-wrap {
      display: flex;
      width: 100%;
      height: 94%;

      .content-left {
        min-width: 21.8%;
        height: 100%;
      }

      .content-center {
        min-width: 52.6%;
      }

      .cneter-w {
        background: #111825;
        min-width: 1000px;
        min-height: 976px;
        min-height: 91.3%;

        .all-toptitle-wrap {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .event-item-w {
            margin-right: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;

            .item-select {
              background-image: url("../../assets/item-select.png");
              background-size: 100%;
              background-repeat: no-repeat;
              width: 100px;
              height: 30px;
              padding: 7px;
              text-align: center;
              margin-right: 10px;
            }

            .item-default {
              background-image: url("../../assets/item-dis-select-m.png");
              background-size: 100%;
              background-repeat: no-repeat;
              width: 100px;
              height: 30px;
              padding: 7px;
              text-align: center;
              margin-right: 10px;
            }
          }
        }
      }

      .content-right {
        min-width: 25%;
      }

      .common-margin {
        margin: 10px 0 0 10px;
      }

      .echa1 {
        background: #111825;
        min-width: 410px;
        min-height: 350px;
        // min-height: 27.78%;

      }

      .echa2 {
        background: #111825;
        min-width: 410px;
        min-height: 700px;
        // min-height: 61.85%;
      }

      .echa3 {
        background: #111825;
        min-width: 1000px;
        min-height: 485px;
        // min-height: 45.27%;
      }

      .echa4 {
        background: #111825;
        min-width: 1000px;
        min-height: 485px;
        // min-height: 45.27%;
      }

      .echa5 {
        background: #111825;
        min-width: 470px;
        min-height: 400px;
        // min-height: 31.48%;
      }

      .echa6 {
        background: #111825;
        min-width: 470px;
        min-height: 650px;
        // min-height: 58.148%;
      }
    }
  }

</style>
